<!--
 * @Description: 
 * @Author: qingyang
 * @Date: 2022-04-24 15:21:52
 * @LastEditors: qingyang
 * @LastEditTime: 2022-05-10 18:33:41
-->

<template>
  <div class="chart-wrap">
    <div id="chart1" class="chart" ref="pieChartRef"></div>
    <div class="flow" id="chart2">
      <GFlow :data="flowData" ref="flowRef"></GFlow>
    </div>
    <div id="chart3" class="chart" ref="pieRef"></div>
    <div id="chart4" class="chart" ref="pie2Ref"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
import GFlow from '@/components/GFlow/index.vue';
import discharge from '@/apis/eci/discharge';
import { getI18nNameBySeparator } from '@/utils';
interface IData {
  name: string;
  value: string | number;
}
export default defineComponent({
  name: 'ChartView',
  components: {
    GFlow
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    taskNo: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    const finish = ref(false);
    const flowData = ref<any>([]);
    const pieChartRef = ref();
    const rateChartRef = ref();
    const pieRef = ref();
    const pie2Ref = ref();
    const loadOption = (data: IData[], colors: string[], rowItem: number) => {
      let nameArr = data.map((item: IData) => {
        return item.name;
      });
      let arr1 = [];
      let arr2 = [];
      if (data.length > rowItem) {
        arr1 = [nameArr[0], nameArr[1], nameArr[2]];
        for (let i = 3; i < data.length; i++) {
          arr2.push(nameArr[i]);
        }
      } else {
        arr1 = nameArr;
      }
      return {
        grid: {
          top: '10%'
        },
        tooltip: null,
        legend: [
          {
            textStyle: {
              color: '#51596C',
              fontSize: 14
            },
            itemGap: 18,
            itemWidth: 14,
            bottom: 20,
            data: arr1
          },
          {
            textStyle: {
              color: '#51596C',
              fontSize: 14
            },
            itemGap: 18,
            itemWidth: 14,
            bottom: 0,
            data: arr2
          }
        ],
        series: [
          {
            center: ['50%', '42%'],
            top: '5%',
            type: 'pie',
            radius: ['30%', '60%'],
            avoidLabelOverlap: false,
            color: colors,
            itemStyle: {
              //   borderRadius: 8,
              //   borderColor: '#151515',
              //   borderWidth: 1
            },
            label: {
              formatter: (params: any) => {
                return '{a|' + params.name + '}' + '\n{b|' + params.percent + '%}';
              },
              rich: {
                a: {
                  color: '#2C3542'
                },
                b: {
                  color: '#2C3542',
                  fontWeight: 'bold',
                  lineHeight: '28'
                }
              }
              //   formatter: '{b} \n{d}%'
            },
            labelLine: {
              lineStyle: {
                color: '#41618072'
              },
              smooth: 0,
              length: 16,
              length2: 16
            },
            data
          }
        ]
      };
    };
    const loadChart = (data: IData[]) => {
      let pieChart = echarts.init(pieChartRef.value);
      pieChart.setOption(
        loadOption(data, ['#06AC88', '#A3D686', '#EED179', '#679D9D', '#97C4C2', '#D7EAE5 '], 5)
      );
    };
    const loadPie = (data: IData[]) => {
      let pieChart = echarts.init(pieRef.value);
      pieChart.setOption(
        loadOption(data, ['#D58180', '#7D987F', '#E8B965', '#C3C4B6', '#D7EAE5', '#DFAF8F '], 6)
      );
    };
    const loadPie2 = (data: IData[]) => {
      let pieChart = echarts.init(pie2Ref.value);
      pieChart.setOption(
        loadOption(data, ['#D58180', '#7D987F', '#E8B965', '#C3C4B6', '#D7EAE5', '#DFAF8F '], 6)
      );
    };
    onMounted(async () => {
      if (props.taskNo) {
        loadAllData(props.taskNo);
      }
    });

    watch(
      () => props.taskNo,
      val => {
        loadAllData(val);
      }
    );
    const loadAllData = async (taskNo: string) => {
      finish.value = false;
      let { emissionList, nodes, links, emissionCategoryList, emissionNoPowerList } =
        await discharge.getPieData(taskNo);
      let newData = emissionCategoryList.map((item: any) => {
        return {
          name: getI18nNameBySeparator(item.name, 'task'),
          value: item.value
        };
      });
      loadChart(newData);
      loadPie(emissionList);
      loadPie2(emissionNoPowerList);
      flowData.value = nodes.length
        ? [
            {
              nodes,
              links
            }
          ]
        : [];
      finish.value = true;
      setTimeout(() => {
        // 延时2000确保图表生成完毕
        emit('finish');
      }, 2000);
    };
    return {
      pieChartRef,
      rateChartRef,
      pieRef,
      pie2Ref,
      flowData
    };
  }
});
</script>
<style lang="scss" scoped>
.chart-wrap {
  position: fixed;
  z-index: -1;
  width: 1000px;
  left: -1000px;
  background: #fff;
  .chart {
    width: 800px;
    height: 400px;
  }
  .flow {
    width: 1000px;
    height: 500px;
  }
}
</style>
